<template>
    <ul>
        <li  v-for="(item,index) of arr" :key="item.id" :class="{active:item.judgment}" ><input type="checkbox" @change="checked(item,$event)" :checked="item.judgment">{{ item.name }}
            <div @click="del(item)">X</div>
        </li>
    </ul>
    <div class="bottoms">
        <button @click="datas('allfinish')">全部:{{all}}</button>
        <button @click="datas('finished')">已完成:{{finish}}</button>
        <button @click="datas('unfinished')">未完成:{{unfinished}}</button>
    </div>
</template>
<script setup>
import { ref, defineProps,defineEmits, toRefs } from 'vue'
let props = defineProps(['arr','all','finish','unfinished'])
let {arr} = toRefs(props)

let checked = function(item,e){
    item.judgment = e.target.checked
}
let abc = defineEmits(['aaa','del'])
let del=function(item){
    abc('del',item)
}
let datas = function(a){
    abc('aaa',a)
}

</script>
<style>
.pics {
    width: 50px;
    height: 30px;
    cursor: pointer;
}

li {
    width: 384px;
    margin: 20px 0;
}

.bottoms {
    display: flex;
}

li div {
    font-weight: 900;
    float: right;
    cursor: pointer;
}

.bottoms button {
    margin: 0px 20px;
    width: 100px;
}
.active{
    background-color: hotpink;
}
</style>